<template>
	<div>
		<!-- dom组件封装 -->
		<!-- "fieldType": "类型,1文本框,2多行文本框,3日期,4数字,6搜索用户,7公式,8表达式,91图片,92文件,101单选按钮,102多选按钮,103下拉列表,104多级下拉列表" -->
		<!-- 单选框 -->
		<select-redio v-if="fieldType==='101'&&isShowItem" ref="redio" :required="isMustFill" :fieldName="fieldName" :label="lableName" :dataList="fieldList" :fieldDefaultValue="fieldDefaultValue" @selectClick="selectClick"></select-redio>	
		<!-- 下拉框 -->	
		<select-redio v-if="fieldType==='103'&&isShowItem" ref="select" :required="isMustFill" :fieldName="fieldName" :label="lableName" :dataList="fieldList" :fieldDefaultValue="fieldDefaultValue" @selectClick="selectClick"></select-redio>
		<!-- 多选按钮 -->
		<div v-if="fieldType==='102'&&isShowItem">
			<van-cell :required="isMustFill" :fieldName="fieldName" :title="lableName" value="" />
			<van-checkbox-group class="checkbox-group" v-model="checked" direction="horizontal">
			  <van-checkbox @click="toggle" ref="checkboxes" icon-size="15px" v-for="item in checkList" :name="item.id" shape="square" :key="item.id">{{item.name}}</van-checkbox>
			</van-checkbox-group>
		</div>		
		<!-- type=6搜索用户 -->
        <search-erp v-if="fieldType==='6'&&isShowItem" 
		ref="search"
		:fieldName="fieldName" 
		:lableName="lableName"
		:isMustFill="isMustFill"
		:fieldDefaultValue = "fieldDefaultValue"
		:searchUserAmount = "searchUserAmount"
		></search-erp>
		<!-- 文本框 -->
		<van-cell-group :border="false" :fieldName="fieldName" v-if="fieldType==='1'&&isShowItem">
			<van-field :required="isMustFill" input-align="right" v-model="inputValue" :label="lableName" :placeholder="fieldAddTipText !==''?fieldAddTipText:lableName" />
		</van-cell-group>
		<!-- 多行文本 -->
		<text-area ref="textarea" v-if="fieldType==='2'&&isShowItem" :items="types"></text-area>
		<!-- 日期选择 -->
		<van-field v-if="fieldType==='3'&&isShowItem" is-link :fieldName="fieldName" input-align="right" readonly clickable
		 name="datetimePicker" :required="isMustFill" :value="dateValue" :label="lableName" placeholder="请选择" @click="showPickerDate = true" />
		<van-popup v-model="showPickerDate" position="bottom">
			<van-datetime-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" type="date" @confirm="chooseStarTime"
			 @cancel="showPickerDate = false" />
		</van-popup>
		<!-- 数字 -->
		<van-field v-if="fieldType==='4'&&isShowItem" :fieldName="fieldName" 
		:required="isMustFill" input-align="right"
		:placeholder="fieldAddTipText !== ''?fieldAddTipText:`请输入`"
		:readonly = "nubDisable"
		@input="numberInput"
		 v-model="order_num" type="number" :label="lableName" />
		<!-- 上传文件 -->
		<up-load ref="files" :fieldName="fieldName" :required="isMustFill" :label="lableName" v-if="fieldType==='92'&&isShowItem" :fieldDefaultValue="fieldDefaultValue"></up-load>
		<!-- 多级联动 -->
		<cascader v-if="fieldType==='104'&&isShowItem" ref="cascader" :items="types"></cascader>
	</div>
</template>

<script>
	import topBar from './topBar.vue'
	import upLoad from './assemblys/upload.vue'
	import searchErp from './assemblys/searchErp.vue'
	import selectRedio from './assemblys/select.vue'
	import textArea from './assemblys/textArea.vue'
	import cascader from './assemblys/cascader.vue'
	import moment from 'moment'
	// 全局注册
	export default {
		data() {
			return {
				pushObj: {},
				fieldAddTipText: '',
				fieldName: '',
				oprField:'',
				lableName: '', //名字
				fieldType: 0, //类型
				isMustFill: false,
				isShowItem: true,
				fieldDefaultValue: '',
				isBigFormPk:'',
				//单选or下拉框
				selectId: '',
				fieldList:[],
				//多选
				checked:[],
				checkList:[],
				// input
				inputValue: '',
				// 日期选择
				showPickerDate: false,
				currentDate: new Date(),
				dateValue: '',
				minDate: new Date(2016, 1, 1),
				maxDate: new Date(2099, 12, 31),
				// 数字
				order_num: '',
				nubDisable:false,
				// 搜索erp
				searchUserAmount:'',
				searchData:'',
				// 上传文件
				fileList: [],
				// 多级联动
				cascaderId:''
			}
		},
		components: {
			topBar,
			upLoad,
			searchErp,
			selectRedio,
			textArea,
			cascader
		},
		props: ['types', 'isHide','isReset'],
		methods: {
			numberInput(e){
				if(e.toString().split(".")[1]){
					if(e.toString().split(".")[1].length>2){
						this.$toast('只能输入两位小数！')
					}
				}		
			},
			pushData() {
				switch (this.fieldType) {
					case '92':
						if (this.isShowItem) {
							let str = ''
							let fileUrl
							if (this.$refs.files.urlFileList.length !== 0) {
								this.$refs.files.urlFileList.forEach(item => {
									str += `${item.url}|${item.original}:`
								})
								fileUrl = str.substr(0, str.length - 1);
							}
							this.$set(this.pushObj, this.fieldName, str !== '' ? fileUrl : {
								'text': this.lableName,
								'must': this.isMustFill
							});
						} else {
							this.pushObj = {}
						}
						break;
					case '1':
						if (this.isShowItem) {
							this.$set(this.pushObj, this.fieldName, this.inputValue ? this.inputValue : {
								'text': this.lableName,
								'must': this.isMustFill
							});
						} else {
							this.pushObj = {}
						}
						break;
					case '2':
						if (this.isShowItem) {
						    const textMessage = this.$refs.textarea.message
							this.$set(this.pushObj, this.fieldName, textMessage ? textMessage : {
								'text': this.lableName,
								'must': this.isMustFill
							})
						} else {
							this.pushObj = {}
						}
						break;
					case '3':
						if (this.isShowItem) {
							this.$set(this.pushObj, this.fieldName, this.dateValue ? this.dateValue : {
								'text': this.lableName,
								'must': this.isMustFill
							})
						} else {
							this.pushObj = {}
						}
						break;
					case '4':
						if (this.isShowItem) {
							this.$set(this.pushObj, this.fieldName, this.order_num ? this.order_num : {
								'text': this.lableName,
								'must': this.isMustFill
							})
						} else {
							this.pushObj = {}
						}
						break;
					case '6':
						if (this.isShowItem) {
							let str =''
							let fileUrl
							if(this.$refs.search.erpList.length!==0){
								this.$refs.search.erpList.forEach(item=>{
									str+=`${item.username},`
								})
								fileUrl = str.substr(0, str.length - 1);
							}
							this.$set(this.pushObj, this.fieldName, str!=='' ? fileUrl : {
								'text': this.lableName,
								'must': this.isMustFill
							})
						} else {
							this.pushObj = {}
						}
						break;
					case '101':
						if (this.isShowItem) {
							this.selectId = this.$refs.redio.selectId
							this.$set(this.pushObj, this.fieldName, this.selectId ? this.selectId : {
								'text': this.lableName,
								'must': this.isMustFill
							})
						} else {
							this.pushObj = {}
						}
						break;
					case '102':
						if (this.isShowItem) {
							this.$set(this.pushObj, this.fieldName, this.checked.length !== 0 ? this.checked : {
								'text': this.lableName,
								'must': this.isMustFill
							})
						} else {
							this.pushObj = {}
						}
						break;
					case '103':
						if (this.isShowItem) {
							this.selectId = this.$refs.select.selectId
							this.$set(this.pushObj, this.fieldName, this.selectId ? this.selectId  : {
								'text': this.lableName,
								'must': this.isMustFill
							})
						} else {
							this.pushObj = {}
						}
						break;
					case '104':
						if (this.isShowItem) {
							if(this.$refs.cascader){
								this.cascaderId = this.$refs.cascader.cascaderValue
							}
							this.$set(this.pushObj, this.fieldName, this.cascaderId !=='' ? this.cascaderId  : {
								'text': this.lableName,
								'must': this.isMustFill
							})
						} else {
							this.pushObj = {}
						}
						break;			
				}
				return this.pushObj
			},
			handlEvent(result) {
				// 处理事件				
				let daziList = []
				if (this.fieldEventLists.length !== 0) {
					this.fieldEventLists.forEach(item => {
						let conditionObj = JSON.parse(item.condition)[0]
						this.oprField = item.oprField
						let str = this.mark(conditionObj.mark, result, conditionObj.value)
						if (conditionObj.type == 1) {
							if (str) {
								// 影响字段可能为多个，需要循环
								let arr = item.affectField.split(",")
								arr.forEach(item_kid => {
									let state = {}
									this.$set(state, 'eventType', item.eventType)
									this.$set(state, 'oprField', item.oprField)
									this.$set(state, 'affectField', item_kid)
									this.$set(state, 'result', result)
									daziList.push(state)
								})
							}
						} else if (conditionObj.type == 2) {
							// console.log('取key值判断')
						}
					})
					this.$emit('eventList', daziList)
				}
			},
			toggle(){
				let str='';
				this.checked.forEach(item=>{
					str+=`${item},`
				})
				this.handlEvent(str)
			},
			selectClick(value){
				this.selectId = value
				this.handlEvent(value)
			},
			chooseStarTime(time) { //选择日期时间
				this.dateValue = moment(time).format("YYYY-MM-DD")
				this.showPickerDate = false;
			},
		},
		created() {
			this.lableName = this.types.name
			this.fieldType = this.types.fieldType
			this.oprField = this.types.oprField
			this.fieldName = this.types.fieldName
			this.searchUserAmount = this.types.searchUserAmount
			this.fieldDefaultValue = this.types.fieldDefaultValue
			this.fieldAddTipText = this.types.fieldAddTipText
			if (this.types.isMustFill === '是'){
				this.isMustFill = true
			}
			if(this.types.isBigFormPk === '是'){
				this.isBigFormPk = this.fieldName
			}
			this.fieldList = this.types.fieldDataGroupDataLists
			this.checkList = this.types.fieldDataGroupDataLists
			this.inputValue = this.fieldDefaultValue
			this.dateValue = this.fieldDefaultValue
			this.order_num = this.fieldDefaultValue
			// 多选默认值
			if(this.fieldType === '102'){
				if(this.fieldDefaultValue !== ''){
					let arr = this.fieldDefaultValue.split(",")
					arr.forEach(item=>{
						this.checked.push(item)
					})
				}				
			}
		},
		mounted() {
			this.toggle()
		},
		watch: {
			isHide: function(val) {
				if (val.length !== 0) {
					val.forEach(item => {
						if (item.affectField == this.fieldName) {
							if (item.eventType === 1) {
								this.isShowItem = false
							} else if (item.eventType === 2) {
								this.isShowItem = true
							} else if(item.eventType === 3){
								this.$axios.post(`/api/fieldEventRef?_form=${this.$route.query.form_id}&_affectFieldName=${item.affectField}&_oprFieldName=${item.oprField}&_oprFieldValue=${item.result}`).then(res=>{
									// console.log(res,'刷新')
									if(res.data.code === 0){
										let obj = {}
										this.$set(obj,'affectField',item.affectField)
										this.$set(obj,'resetList',res.data.data)
										this.$emit('resetEvent',obj)
									}
								})
							}
						}
					})
				}
			},
			isReset:function(val){
				if(val.affectField === this.fieldName){
					if(val.resetList.length !== 0){
						this.fieldList = val.resetList.map(item => ({
							'name': item.name,
							'id': item.id,
							'sysBasicDataId': item.sysBasicDataId,
							'ef1': item.ef1
						}))
						this.$refs.redio.defaultValue = ''
						this.$refs.redio.selectValue = ''
						if(this.$store.state.once === 'go'){
							this.$refs.redio.setDefaultValue(this.fieldDefaultValue)
							this.$store.commit('setOnce','no')
						}
						
					}
				}
			}
		},
		computed: {
			fieldEventLists() { //表单事件
				return this.types.fieldEventLists !== '' ? this.types.fieldEventLists : []
			},
			mark() {
				return function(val, result, value) {
					if (val === '1') {
						return result === value
					} else if (val === '2') {
						return result !== value
					} else if (val === '3') {
						return result > value
					} else if (val === '4') {
						return result >= value
					} else if (val === '5') {
						return result < value
					} else if (val === '6') {
						return result <= value
					} else if (val === '7') {
						return result.includes(value)
					} else if (val === '8') {
						return !result.includes(value)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cell {
		/deep/ .van-cell__value {
			white-space: nowrap;
			text-overflow: ellipsis;
			color: #C8C9CC;
		}

		/deep/ .van-cell__title {
			color: #646566;
		}
	}
	.van-cell{
		/deep/ .van-cell__title{
			font-size: vw(14);
		}
		/deep/ .van-cell__value{
			font-size: vw(14);
		}
	}
	.checkbox-group{
		background-color: #FFFFFF;
	}
	.van-checkbox{
		width: 40%;
		margin-top: vw(8);
		margin-bottom: vw(8);
		margin-left: 16px;
		font-size: vw(14);
	}
</style>
